<template>
  <div class="vue-dropdown"
       @click="isShow =! isShow">
    <div class="channel_bg"
         v-if="current.color"
         :style="current.color"
         @click="isShow =! isShow"></div>
    <div class="cur-name"
         @click="isShow =! isShow">{{current.channel}}</div>
    <div class="list-and-search"
         :class="isShow?'on':''">
      <div class="search-module clearfix"
           v-show="isNeedSearch">
        <input class="search-text"
               @input='search'
               :placeholder="placeholder" />
      </div>
      <div class="list-module">
        <div v-for="(item,index) in datalist"
             @click="clickItem(item)"
             :key="index">
          <div v-if="item.color"
               class="channel_bg"
               :style="item.color"></div>
          <span class="list-item-text"
                @click="isShow =! isShow">{{item.channel}}</span>
        </div>
      </div>
      <div class="tip-nodata"
           v-show="searchValue.length && !datalist.length">未找到数据</div>
    </div>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      searchValue: '',
      current: this.curData,
      datalist: [],
      isShow: false
    }
  },
  props: {
    curData: String,	// 当前选中数据
    itemData: Array,	// 所有选项数据
    isNeedSearch: {	// 是否需要搜索
      type: Boolean,
      default: false
    },
    placeholder: {	// 输入框提示文本
      type: String,
      default: '搜索'
    },
  },
  created () {
    this.datalist = this.itemData;
    //点击组件以外的地方，收起
    document.addEventListener('click', (e) => {
      if (!this.$el.contains(e.target)) {
        this.isShow = false;
      }
    }, false)
  },
  methods: {
    search (e) {
      this.searchValue = e.target.value;
      this.datalist = this.itemData.filter((item) => {
        return item.indexOf(this.searchValue) != -1;
      });
    },
    clickItem (item) {
      this.current = item;
      this.isShow = true;
      this.$emit('change', item);
    },
  }
}
</script>
 
<style scoped lang="scss">
.vue-dropdown {
  .channel_bg {
    margin-left: 10px;
    display: inline-block;
    width: 12px;
    height: 12px;
  }
  z-index: 10;
  // width: 13vw;
  border-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  &._self-show {
    display: block !important;
  }
  .search-module {
    position: relative;
    border-bottom: 1px solid #ccc;
    .search-text {
      // width: 100%;
      height: 30px;
      padding: 0 10px;
      box-shadow: none;
      outline: none;
      border: none;
    }
    .search-icon {
      position: absolute;
      top: 24%;
      right: 0.5em;
      color: #aaa;
    }
  }
  input::-webkit-input-placeholder {
    font-size: 14px;
  }
  .list-module {
    max-height: 200px;
    overflow-y: auto;
    .channel_bg {
      display: inline-block;
      width: 12px;
      height: 12px;
    }
    li {
      &._self-hide {
        display: none;
      }
      padding: 10px;
      &:hover {
        cursor: pointer;
        color: #fff;
        background: #00a0e9;
      }
    }
  }
}
.list-and-search {
  display: none;
  background: #fff;
  border: 1px solid #ccc;
  position: absolute;
  width: 100%;
  &.on {
    display: block;
  }
}
.cur-name {
  display: contents;
  height: 32px;
  line-height: 32px;
  padding: 0 10px;
  position: relative;
  color: #777;
  &:after {
    position: absolute;
    right: 9px;
    top: 13px;
    content: " ";
    width: 0;
    height: 0;
    border-right: 6px solid transparent;
    border-top: 6px solid #7b7b7b;
    border-left: 6px solid transparent;
    border-bottom: 6px solid transparent;
  }
  &.show {
    &:after {
      right: 9px;
      top: 6px;
      border-right: 6px solid transparent;
      border-bottom: 6px solid #7b7b7b;
      border-left: 6px solid transparent;
      border-top: 6px solid transparent;
    }
  }
}
.tip-nodata {
  font-size: 14px;
  padding: 10px;
}
</style>